import {
  Route,
  Routes,
  unstable_HistoryRouter as HistoryRouter,
} from 'react-router-dom'
import './App.scss'
import Layout from './pages/Layout'
import Login from './pages/Login'
import Home from './pages/Home'
import Question from './pages/Question'
import Video from './pages/Video'
import Profile from './pages/Profile'
import Edit from '@/pages/Profile/Edit'
import Chat from './pages/Profile/Chat'
import { AuthRoute } from '@/components/AuthRoute'
import { history } from './utils/history'
import NotFound from './pages/NotFound'

function App() {
  return (
    <HistoryRouter history={history}>
      <div className="App">
        <Routes>
          <Route
            path="/"
            element={
              <AuthRoute>
                <Layout />
              </AuthRoute>
            }
          >
            <Route index element={<Home />}></Route>
            <Route path="question" element={<Question />}></Route>
            <Route path="video" element={<Video />}></Route>
            <Route path="profile" element={<Profile />}></Route>
          </Route>
          <Route path="/login" element={<Login />}></Route>
          <Route path="/profile/edit" element={<Edit />}></Route>
          <Route path="/profile/chat" element={<Chat />}></Route>
          <Route path="*" element={<NotFound />}></Route>
        </Routes>
      </div>
    </HistoryRouter>
  )
}

export default App
